<template>
	<view class="heighly">
		<view class="bang1 u-flex u-flex-around u-flex-items-end" v-if="dataList.length > 0">
			<view class="fen-2 u-flex u-flex-x-reverse u-flex-items-end">
				<view class="fen-1 m-flex-y u-flex-items-center">
					<view class="border-0"><u--image :showLoading="true" :src="dataList[0].avatar" width="72" height="72" shape="circle"></u--image></view>
					<view class="m-pai"><u--image :showLoading="true" :src="oss + '/christmasr/pai1.png'" width="35" mode="widthFix"></u--image></view>
					<view class="u-font-30">{{ dataList[0].id }}号</view>
					<view class="piao_nam u-border-bottom m-line-1">{{ dataList[0].name }}</view>
					<view class="u-flex u-m-t-32">
						<u-icon name="heart-fill" color="#fff" size="12"></u-icon>
						<view class="u-font-30 u-m-l-5">{{ dataList[0].num }}</view>
					</view>
				</view>
				<view class="fen-1 m-flex-y u-flex-items-center" v-if="dataList.length > 1">
					<view class="border-1"><u--image :showLoading="true" :src="dataList[1].avatar" width="57" height="57" shape="circle"></u--image></view>
					<view class="m-pai"><u--image :showLoading="true" :src="oss + '/christmasr/pai2.png'" width="35" mode="widthFix"></u--image></view>
					<view class="u-font-30">{{ dataList[1].id }}号</view>
					<view class="piao_nam u-border-bottom m-line-1">{{ dataList[1].name }}</view>
					<view class="u-flex u-m-t-20">
						<u-icon name="heart-fill" color="#fff" size="12"></u-icon>
						<view class="u-font-30 u-m-l-5">{{ dataList[1].num }}</view>
					</view>
				</view>
			</view>
			<view class="fen-1">
				<view class="m-flex-y u-flex-items-center" v-if="dataList.length > 2">
					<view class="border-2"><u--image :showLoading="true" :src="dataList[2].avatar" width="57" height="57" shape="circle"></u--image></view>
					<view class="m-pai"><u--image :showLoading="true" :src="oss + '/christmasr/pai3.png'" width="35" mode="widthFix"></u--image></view>
					<view class="u-font-30">{{ dataList[2].id }}号</view>
					<view class="piao_nam u-border-bottom m-line-1">{{ dataList[2].name }}</view>
					<view class="u-flex u-m-t-20">
						<u-icon name="heart-fill" color="#fff" size="12"></u-icon>
						<view class="u-font-30 u-m-l-5">{{ dataList[2].num }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bang2" v-if="dataList.length > 3">
			<view class="bang2-item u-border-bottom" v-for="(item, index) in dataList" :key="index" v-if="index > 2">
				<view class="u-flex u-flex-items-center">
					<view class="u-m-r-40 u-font-30">{{ index + 1 }}</view>
					<u--image :showLoading="true" :src="item.avatar" width="45" height="45" shape="circle"></u--image>
					<view class="u-m-l-20">
						<view class="u-font-30">{{ item.id }}号</view>
						<view class="u-m-t-10 m-c-94 m-line-1">{{ item.name }}</view>
					</view>
				</view>
				<view class="m-piao">{{ item.num }}</view>
			</view>
		</view>
		<list-empty v-if="!dataList.length" text="暂时没有数据哟!" list="data" :listHighly="highly"></list-empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataList: []
		};
	},
	async onLoad(e) {
		if (e.id) {
			this.path = 'toupiaolist';
			this.params = {
				...this.params,
				pnum: this.pnum,
				id: +e.id
			};
			await this.getList();
		} else {
			this.nextNav('back');
		}
	}
};
</script>

<style lang="scss">
.border-0 {
	border: 8rpx solid #f1d994;
	border-radius: 144rpx;
}

.border-1 {
	border: 6rpx solid #dcdcdc;
	border-radius: 144rpx;
}

.border-2 {
	border: 6rpx solid #dec5ab;
	border-radius: 144rpx;
}

.bang1 {
	background-color: #0e5642;
	color: #fff;
	padding-top: 20rpx;
	padding-bottom: 80rpx;
}

.m-pai {
	margin-top: -30rpx;
}

.bang2 {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 25rpx 40rpx;
}

.bang2-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 40rpx 20rpx 15rpx;
}

.fen-2 {
	width: 500rpx;
	flex-shrink: 0;
}

.fen-1 {
	width: 250rpx;
	flex-shrink: 0;
}

.piao_nam {
	margin: 10rpx auto 0;
	padding-bottom: 8rpx;
	width: 210rpx;
	text-align: center;
}
</style>
